// 在任意的 路由页面或者 局部组件 都可以随时的读取和修改 state 状态数据了
import MyBox from './components/MyBox'
import { useSelector } from 'react-redux'
import { useAnimate } from 'react-simple-animate'




function App(props: any) {

  const animate = useAnimate({
    complete: { display: 'none' },  //动画完成的css
    easeType: "linear", //动画的表现
    duration: 5,  //动画时长
    start: { opacity: 0 },  //动画开始
    end: { opacity: 1 },  //动画结束
    onComplete: () => { //动画结束的方法
      console.log('complete')
    }
  })


  // state 里面的数据获取
  const loginState = useSelector((state: any) => state.user.loginState)
  const userinfo = useSelector((state: any) => state.user.userinfo)
  return <>
    <h2>根应用 - 状态管理</h2>
    <h2>用户名：{userinfo.name}</h2>
    <h3>{
      loginState ? '电话：' + userinfo.phone : '获取电话号码失败'
    }</h3>
    <hr />
    <MyBox></MyBox>
    <hr />
    <div style={animate.style}>123</div>
    <button onClick={() => {
      animate.play(true)
    }}>点击动画显示</button>
  </>
}

// 高阶组件  
export default App